var body2 = document.querySelector(".body2")
var span1 = body2.querySelector(".span1")
var span2 = body2.querySelector(".span2")
var span3 = body2.querySelector(".span3")
var u = document.querySelector(".ul")
var ul = document.querySelector(".ul1")
var imgs = ul.querySelectorAll("img")
var h5 = ul.querySelectorAll("h5")
var p = ul.querySelectorAll("p")
var divs = ul.querySelectorAll("div")
var dian = document.querySelector(".biao")
var sdian = dian.querySelector("span")
var li = ul.querySelectorAll("li")
console.log(imgs);
console.log(span1);
////
window.onload = function () {
    for (var n = 16; n < li.length; n++) {
        li[n].style.display = "none"
    }
    dian.style.display = "block"
    sdian.onclick = function () {
        dian.style.display = "none"
        for (var n = 16; n < li.length; n++) {
            li[n].style.display = "block"
        }
    }
    span2.className = "span2"
    span3.className = "span3"
    span1.className = "span1 ssp"
    ul.style.display = "block"
    var obj = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP');
    obj.open('get', 'http://127.0.0.1:3000/play/new', true);
    obj.send();
    obj.onreadystatechange = function () {
        if (obj.readyState == 4 && obj.status == 200) {
            console.log(obj.responseText);
            var list = JSON.parse(obj.responseText)
            console.log(list[0]);
            var index = 0
            for (var i = 0; i < list.length; i++) {
                for (var j = 0; j < list[i].length; j++) {
                    console.log(list[i][j].img);
                    imgs[index].src = "" + list[i][j].img + ""
                    imgs[index].className = "img"
                    h5[index].innerHTML = "" + list[i][j].text + ""
                    h5[index].className = "h5"
                    p[index].innerHTML = "" + list[i][j].description + ""
                    p[index].className = "pp"
                    var spans = divs[index].querySelectorAll("span")
                    divs[index].className = "dv"
                    spans[0].innerHTML = "" + list[i][j].price + ""
                    spans[0].className = "ssp1"
                    spans[2].innerHTML = "" + list[i][j].words + ""
                    spans[2].className = "ssp2"
                    var im2 = document.createElement("img")
                    im2.src = "./imgs/reply.png"
                    im2.className = "im1"
                    divs[index].insertBefore(im2, spans[2])
                    spans[1].innerHTML = "" + list[i][j].like + ""
                    spans[1].className = "ssp2"
                    var im1 = document.createElement("img")
                    im1.src = "./imgs/xin.png"
                    im1.className = "im"
                    divs[index].insertBefore(im1, spans[1])
                    index++
                }
            }
            // lis.forEach(function (item, index) {
            //     console.log(index);
            // })

        }
    }
    var divpl = u.querySelectorAll(".divpl")
    for (var m = 0; m < divpl.length; m++) {
        divpl[m].style.display = "none"
    }
}
//////
span1.addEventListener("click", function () {
    for (var n = 16; n < li.length; n++) {
        li[n].style.display = "none"
    }
    dian.style.display = "block"
    sdian.onclick = function () {
        dian.style.display = "none"
        for (var n = 16; n < li.length; n++) {
            li[n].style.display = "block"
        }
    }
    span2.className = "span2"
    span3.className = "span3"
    span1.className = "span1 ssp"
    ul.style.display = "block"
    var obj = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP');
    obj.open('get', 'http://127.0.0.1:3000/play/new', true);
    obj.send();
    obj.onreadystatechange = function () {
        if (obj.readyState == 4 && obj.status == 200) {
            console.log(obj.responseText);
            var list = JSON.parse(obj.responseText)
            console.log(list[0]);
            var index = 0
            for (var i = 0; i < list.length; i++) {
                for (var j = 0; j < list[i].length; j++) {
                    console.log(list[i][j].img);
                    imgs[index].src = "" + list[i][j].img + ""
                    imgs[index].className = "img"
                    h5[index].innerHTML = "" + list[i][j].text + ""
                    h5[index].className = "h5"
                    p[index].innerHTML = "" + list[i][j].description + ""
                    p[index].className = "pp"
                    var spans = divs[index].querySelectorAll("span")
                    divs[index].className = "dv"
                    spans[0].innerHTML = "" + list[i][j].price + ""
                    spans[0].className = "ssp1"
                    spans[2].innerHTML = "" + list[i][j].words + ""
                    spans[2].className = "ssp2"
                    var im2 = document.createElement("img")
                    im2.src = "./imgs/reply.png"
                    im2.className = "im1"
                    divs[index].insertBefore(im2, spans[2])
                    spans[1].innerHTML = "" + list[i][j].like + ""
                    spans[1].className = "ssp2"
                    var im1 = document.createElement("img")
                    im1.src = "./imgs/xin.png"
                    im1.className = "im"
                    divs[index].insertBefore(im1, spans[1])
                    index++
                }
            }
            // lis.forEach(function (item, index) {
            //     console.log(index);
            // })

        }
    }
    var divpl = u.querySelectorAll(".divpl")
    for (var m = 0; m < divpl.length; m++) {
        divpl[m].style.display = "none"
    }
})
/////
//////
span2.addEventListener("click", function () {
    for (var n = 16; n < li.length; n++) {
        li[n].style.display = "none"
    }
    dian.style.display = "block"
    sdian.onclick = function () {
        dian.style.display = "none"
        for (var n = 16; n < li.length; n++) {
            li[n].style.display = "block"
        }
    }
    span1.className = "span1"
    span3.className = "span3"
    span2.className = "span2 ssp"
    ul.style.display = "block"
    var obj = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP');
    obj.open('get', 'http://127.0.0.1:3000/play/hot', true);
    obj.send();
    obj.onreadystatechange = function () {
        if (obj.readyState == 4 && obj.status == 200) {
            console.log(obj.responseText);
            var list = JSON.parse(obj.responseText)
            console.log(list[0]);
            var index = 0
            for (var i = 0; i < list.length; i++) {
                for (var j = 0; j < list[i].length; j++) {
                    console.log(list[i][j].img);
                    imgs[index].src = "" + list[i][j].img + ""
                    imgs[index].className = "img"
                    h5[index].innerHTML = "" + list[i][j].text + ""
                    h5[index].className = "h5"
                    p[index].innerHTML = "" + list[i][j].description + ""
                    p[index].className = "pp"
                    var spans = divs[index].querySelectorAll("span")
                    divs[index].className = "dv"
                    spans[0].innerHTML = "" + list[i][j].price + ""
                    spans[0].className = "ssp1"
                    spans[2].innerHTML = "" + list[i][j].words + ""
                    spans[2].className = "ssp2"
                    var im2 = document.createElement("img")
                    im2.src = "./imgs/reply.png"
                    im2.className = "im1"
                    divs[index].insertBefore(im2, spans[2])
                    spans[1].innerHTML = "" + list[i][j].like + ""
                    spans[1].className = "ssp2"
                    var im1 = document.createElement("img")
                    im1.src = "./imgs/xin.png"
                    im1.className = "im"
                    divs[index].insertBefore(im1, spans[1])
                    index++
                }
            }
            // lis.forEach(function (item, index) {
            //     console.log(index);
            // })

        }
    }
    var divpl = u.querySelectorAll(".divpl")
    for (var m = 0; m < divpl.length; m++) {
        divpl[m].style.display = "none"
    }
})
/////////
/////////
/////////
span3.addEventListener("click", function () {
    dian.style.display = "none"
    ul.style.display = "none"
    span1.className = "span1"
    span2.className = "span2"
    span3.className = "span3 ssp"
    var obj = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP');
    obj.open('get', 'http://localhost:3000/play/category', true);
    obj.send();
    obj.onreadystatechange = function () {
        if (obj.readyState == 4 && obj.status == 200) {
            var list = JSON.parse(obj.responseText)
            console.log(list);
            for (var i = 0; i < list.length; i++) {
                var divpl = document.createElement("div")
                u.appendChild(divpl)
                divpl.className = "divpl"
                var ppl = document.createElement("p")
                ppl.innerHTML = '' + list[i].title + ''
                divpl.appendChild(ppl)
                console.log(list[i].list);
                var n = 1
                for (var j = 0; j < list[i].list.length; j++) {
                    if (j < 5) {
                        var divpl1 = document.createElement("div")
                        divpl1.className = "divpl1"
                        divpl.appendChild(divpl1)
                        var ppl1 = document.createElement("p")
                        ppl1.innerHTML = '' + list[i].list[j].productName + '(' + list[i].list[j].nums + ') '
                        ppl1.className = "ppl1"
                        var imgpl = document.createElement("img")
                        divpl1.appendChild(imgpl)
                        divpl1.appendChild(ppl1)
                        imgpl.src = './imgs/cat_' + n + '.png'
                        n += 1
                    } else {
                        var divpl2 = document.createElement("div")
                        divpl2.className = "divpl2"
                        divpl.appendChild(divpl2)
                        var spanpl = document.createElement("span")
                        divpl2.appendChild(spanpl)
                        spanpl.innerHTML = '' + list[i].list[j].productName + '(' + list[i].list[j].nums + ') '

                    }
                }

            }
            for (var a = 0; a < document.querySelectorAll(".divpl").length; a++) {
                var divpl3 = document.createElement("div")
                divpl3.className = "divpl3"
                document.querySelectorAll('.divpl')[a].insertBefore(divpl3, document.querySelectorAll('.divpl')[a].querySelector(".divpl2"))
            }
        }
    }
})